<template>
    

    <div class="citysort-box">
        <div v-for="(citie,index) in cities" :key="index" :ref="index">
        <h2>{{index}}</h2>
             <ul class="citysort-list">
             <li v-for="cities in citie" :key="cities.id" @click="addCityClick(cities.name)"><a href="javascript:void(0)" >{{cities.name}}</a></li>

        </ul>
        </div>

    </div>

</template>


<script>

export default {
    name:'CityList',
    props:['cities'],
    computed:{
        letter(){
            const letterList = []

            for(var i in this.cities){

                letterList.push(i)

            }

            return letterList

        }
    },
    methods:{
        addCityClick(name){
            // console.log(name)

            this.$store.dispatch('changeCity',name)
            this.$router.push('/')

        }
    }
}

</script>

<style lang="stylus" scoped>

       .citysort-box
        h2
            margin:12px 15px
    .citysort-list
        padding:15px 0
        background:#fff
        overflow:hidden
        li
          width:16.66%
          text-align:center
          line-height:45px
          float:left

        
          


</style>

